<template>
    <div class="tech-recharge-gift-item">
        <div v-if="count > 1" class="item-count">x{{count}}</div>
        <div class="item-value">{{valueText}}</div>
        <div class="item-name">{{name}}</div>
    </div>
</template>

<script>
export default {
    name: 'RechargeGiftItem',
    components: {},
    computed: {
        valueText() {
            const { value, type } = this.$props;
            return type === 'discount' ? `${value}折` : `￥${value}`;
        },
    },
    props: {
        value: { // 价值
            type: [Number, String],
            default: 0,
        },
        name: String, // 名字
        count: { // 数量，默认：1
            type: Number,
            default: 1,
        },
        type: String,
    },
};
</script>

<style lang="less">
@gift-color: #8D6627;
@gift-border-color: #DDC089;
@gift-bg-color: #FFFAED;
.tech-recharge-gift-item {
    .border-radius();
    .flex-column-center();
    border: 1px solid @gift-border-color;
    background-color: @gift-bg-color;
    position: relative;
    color: @gift-color;
    .m-t(@gap);
    .item-count {
        position: absolute;
        top: -@gap;
        right: @gap-sm;
        .font-size-sm();
        border-radius: 9px;
        height: 18px;
        line-height: 18px;
        border: 1px solid @gift-border-color;
        background-color: @white;
        .p-h(@gap-sm);
    }
    .item-value {
        .font-size(23);
        font-weight: @font-weight-bold;
        .p-v(@gap-sm);
    }
    .item-name {
        width: 100%;
        border-top: 1px dashed @gift-border-color;
        .font-size-sm();
        .p-v(@gap-sm);
        .t-c();
        position: relative;
        &::before, &::after {
            content: '';
            position: absolute;
            width: @gap;
            height: @gap-sm;
            background-color: @white;
            top: -@gap-sm + 1;
            left: -@gap-sm + 1;
            border-radius: @gap @gap 0 0;
            border: 1px solid @gift-border-color;
            transform: rotate(90deg);
            border-bottom-color: @white;
        }
        &::after {
            right: -@gap-sm + 1;
            left: auto;
            transform: rotate(-90deg);
        }
    }
}
</style>

